<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    fullscreen
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      class="rich-text-editor-container"
      label-width="100px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="标题:" prop="docName">
            <el-input
              v-model="state.formData.docName"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内容分类:" prop="docTypeName">
            <el-input v-model="state.formData.docTypeName" :disabled="true">
              <template #append>
                <el-button icon="Search" @click="openDocTypeSelector">
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否置顶:" prop="totop">
            <el-select v-model="state.formData.totop" placeholder="请选择">
              <el-option key="0" label="置顶" value="0" />
              <el-option key="1" label="不置顶" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="关键字:" prop="keyWord">
            <el-input
              v-model="state.formData.keyWord"
              :maxlength="64"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注:" prop="remark">
            <el-input
              v-model="state.formData.remark"
              :maxlength="128"
              :rows="1"
              :show-word-limit="true"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="内容:" prop="docContent">
            <WangEditor
              :init-value="state.formData.docContent"
              @change="onEditorChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="save">
        确定
      </el-button>
    </template>
    <TreeNodePicker
      ref="docTypeRef"
      title="选择内容分类"
      @change="handleDocTypeSelect"
    />
  </el-dialog>
</template>

<script setup name="DocEdit">
import { useMessage } from "@/hooks/message";
import { addDoc, updateDoc } from "@/api/admin/cms/doc/";
import TreeNodePicker from "@/components/treeNodePicker.vue";
import WangEditor from "@/components/Editor/index.vue";

const props = defineProps({
  title: {
    type: String,
    default: "内容"
  },
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);
const docTypeRef = ref(null);

const state = reactive({
  dialogTitle: props.title,
  dialogVisible: false,
  operationAdd: false,
  formData: {
    id: "",
    docTypeCode: "",
    docTypeName: "",
    docName: "",
    totop: "0",
    keyWord: "",
    docContent: "",
    remark: ""
  },
  formRules: {
    docTypeCode: [{ required: true, message: "分类不能为空", trigger: "blur" }],
    docName: [{ required: true, message: "标题不能为空", trigger: "blur" }],
    totop: [{ required: true, message: "是否置顶不能为空", trigger: "blur" }],
    docContent: [{ max: 2048, message: "内容长度超出限制", trigger: "change" }]
  }
});

const show = row => {
  if (row) {
    state.dialogTitle = `修改${props.title}`;
    state.formData.id = row.id;
    state.formData.docTypeCode = row.docTypeCode;
    state.formData.docTypeName = row.docTypeName;
    state.formData.docName = row.docName;
    state.formData.totop = row.totop;
    state.formData.keyWord = row.keyWord;
    state.formData.docContent = row.docContent;
    state.formData.remark = row.remark;
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  state.dialogVisible = true;
};

const close = () => {
  state.operationAdd = false;
  state.dialogTitle = props.title;
  state.formData = {
    id: "",
    docTypeCode: "",
    docTypeName: "",
    docName: "",
    totop: "0",
    keyWord: "",
    docContent: "",
    remark: ""
  };
  state.dialogVisible = false;
};

const onEditorChange = (arr, html) => {
  state.formData.docContent = html;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let data;
      if (state.operationAdd) {
        data = await addDoc(state.formData);
      } else {
        data = await updateDoc(state.formData);
      }
      if (data.code === 200) {
        useMessage().success(data.msg);
        emits("confirm", {});
        close();
      } else {
        useMessage().warning(data.msg);
      }
    }
  });
};

const openDocTypeSelector = () => {
  const row = {};
  row.treeCode = "cms";
  docTypeRef.value.show(row);
};

const handleDocTypeSelect = node => {
  state.formData.docTypeCode = node.nodeCode;
  state.formData.docTypeName = node.text;
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped>
.el-input__inner {
  width: 140px;
}
</style>
